<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<script src="js/jquery.min.js"></script>
<script src="js/echarts.min.js"></script>
<title>demo</title>
<style>
  .demo{
     margin:50px auto;
     height:500px;
     width:600px;
  }
</style>
</head>
<body>
     <div class="demo"></div>
     <script>
     function Options(jsonObject){
       var option = {
 		    tooltip: {
 		        trigger: 'item',
 		        formatter: function(obj){
 		        	if(obj.name.indexOf('点击切换')!=(-1))
 		        		return obj.seriesName+" : "+obj.value+"学分"
 		            else
 		        	    return  obj.seriesName+" <br/> "+obj.name+" : "+obj.value+" 学分"
 		          }
 		    },
 		    legend: {
 		        orient: 'vertical',
 		        x: 'left',
 		        data:[]
 		    },
 		    series: [
 		        {
 		            name:'未完成',
 		            type:'pie',
 		            selectedMode: 'single',
 		            radius: [0, '25%'],
 		            label: {
 		                normal: {
 		                    position: 'center',
 		                    textStyle: {
 		                	  color: '#fff'
 		                	  }
 		                }
 		            },
 		            labelLine: {
 		                normal: {
 		                    show: false
 		                }
 		            },
 		            data:[]
 		        },
 		        {
 		            name:'类别',
 		            type:'pie',
 		            radius: ['40%', '60%'],
 		            data:[]
 		        }
 		    ]
 		};
        option.legend.data=jsonObject.legend_data;
        option.series[0].name=jsonObject.style;
    	option.series[0].data=jsonObject.series_data_1;
    	option.series[1].data=jsonObject.series_data_2;
    	return option;
       }
     var json_1={
    		"legend_data":['必修课','公选课','必读书','计算机等级考试','其他等级考试'],
    		"style":"未完成",
    		"series_data_1" :[{value:62, name:'未完成33.5% \n\n（点击切换）'}],
    		"series_data_2" :[
    		                  {value:30, name:'必修课'},
    		                  {value:15, name:'公选课'},
    		                  {value:10, name:'必读书'},
    		                  {value:0, name:'计算机等级考试'},
    		                  {value:7, name:'其他等级考试'}
    		                  ]
       };
     var json_2={
    		"legend_data":['必修课','公选课','必读书','计算机等级考试','其他等级考试'],
    		"style":"已完成",
     		"series_data_1" :[{value:123, name:'已完成76.5% \n\n（点击切换）'}],
     		"series_data_2" :[
     		                  {value:96, name:'必修课'},
     		                  {value:15, name:'公选课'},
     		                  {value:5, name:'必读书'},
     		                  {value:2, name:'计算机等级考试'},
     		                  {value:5, name:'其他等级考试'}
     		                  ]
        };
      
     var the_demo=echarts.init($('.demo')[0], 'macarons');
     the_demo.setOption(Options(json_1), true);
     the_demo.on('click', function(p) {
		 if(p.seriesName.indexOf('未')!=(-1))
			 the_demo.setOption(Options(json_2), true);
	     else
	    	 the_demo.setOption(Options(json_1), true);
	});
     </script>
</body>
</html>